<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <style type="text/css">
            ul li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #app {
                width: 600px;
                height: 400px;
                margin: 0 auto;
                border: 1px solid #ccc;
            }
            .tab-tilte{
                width: 90%;
            }
            .tab-tilte li{
                float: left;
                width: 25%;
                padding: 10px 0;
                text-align: center;
                background-color:#f4f4f4;
                cursor: pointer;
            }
            .tab-tilte .active{
                background-color: #09f;
                color: #fff;
            }
            .tab-content div{
                float: left;
                width: 25%;
                line-height: 100px;
                text-align: center;
            }
        </style>
        <div id="app" style="height:100%; width:100%">
            <ul class="tab-tilte" style="height:10%">
                <li v-for="(title,index) in tabTitle" @click="drawMap(title);cur=index" :class="{active:cur==index}">{{title.displayName}}</li>
            </ul>
            <div id="container" style="height:100%; width:100%"></div>
        </div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
       <script type="text/javascript">
/*
    axios.get('http://127.0.0.1/dtm/v1/capability/personals/23412').then(function (response) {
        renderRadar(response.data.data);
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
    */

var response ={"code":2000,"message":"成功","data":[
    {"userId":10000,"displayName":"程序员1","output":0.033,"cost":0.02,"will":-0.021,"ability":0.025,"growUp":0.011},
    {"userId":10001,"displayName":"程序员2","output":0.032,"cost":0.02,"will":-0.015,"ability":0.025,"growUp":0.021},
    {"userId":10002,"displayName":"程序员3","output":0.041,"cost":0.07,"will":-0.022,"ability":0.025,"growUp":0.016},
    {"userId":10003,"displayName":"程序员4","output":0.021,"cost":0.03,"will":-0.010,"ability":0.025,"growUp":0.025}],
"timestamp":1588583579};

        var app = new Vue({
            el:'#app',
            data: {
                tabTitle: response.data,
                cur: 0 
            },
            methods: {
                drawMap: function(title) {
                    renderRadar(title)
                }
            }
        })


function renderRadar(data) {
    var chartdom = document.getElementById("container");
    var myChart = echarts.init(chartdom);
    option = {
        title: {
            text: '个人胜任力'
        },
        tooltip: {},
        legend: {
            data: [ data.displayName ]
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                { name: '个人产出', max: 0.1},
                { name: '个人成本', max: 0.1},
                { name: '个人意愿', min: -0.1, max: 0.1},
                { name: '个人能力', max: 0.1},
                { name: '个人成长', max: 0.1}
            ]
        },
        series: [{
            name: '程序员1',
            type: 'radar',
            data: [
                {
                    value: [data.output, data.cost, data.will, data.ability, data.growUp],
                    name: data.displayName
                }
            ]
        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

       </script>
   </body>
</html>
